<!-- 企业端登录页面 -->
<template>
  <div class="page">
    <HeadCom />
    <div class="content">
      <div class="bg-block" />
      <div class="login-box">
        <p class="title">数据学徒企业端</p>
        <p class="tip">请使用账号登录</p>
        <div class="list-box">
          <div class="label">
            <p class="label-title">国家/地区</p>
            <p class="label-tip" style="margin-right: 30px">Country/State</p>
          </div>
          <div class="value" style="cursor: pointer">
            <p class="value-title">{{ chinese_name }}</p>
            <i class="el-icon-arrow-right icon" />
            <el-select
              v-model="chinese_name"
              style="width: 145px; margin-right: 12px"
            >
              <el-option
                v-for="(item, index) in nationPhoneNumber"
                :key="index"
                :value="item.chinese_name"
                :label="'+' + item.chinese_name"
                >{{ item.chinese_name }}</el-option
              >
            </el-select>
          </div>
        </div>
        <div class="list-box">
          <div class="label">
            <p class="label-title" style="margin-right: 18px; font-size: 15px">
              +{{ chinese_code }}
            </p>
            <p class="label-tip" style="margin-right: 22px">Phone Number</p>
          </div>
          <div class="value">
            <input
              v-model.number="mobile"
              class="value-input"
              placeholder="手机号码"
              maxlength="11"
              @blur="getTenantIdByMobile"
            />
            <span v-show="!timeout" class="code" @click="getCode"
              >发送验证码</span
            >
            <span
              v-show="timeout"
              class="code"
              :style="timeout ? 'color:#C8C8C8' : ''"
              >已发送{{ timeout }}s</span
            >
          </div>
        </div>
        <div class="list-box">
          <div class="label">
            <p class="label-title">短信验证码</p>
            <p class="label-tip" style="margin-right: 10px">
              Verification Code
            </p>
          </div>
          <div class="value" style="padding-left: 10px">
            <input
              v-model="code"
              class="value-input"
              placeholder="短信验证码"
            />
          </div>
        </div>
        <div v-show="errCode" class="code-tip">
          {{
            ["", "手机号码", "密码", "短信验证码"][errCode]
          }}输入错误，请重新输入
        </div>
        <div
          class="login-btn"
          :class="[checked ? '' : 'checked']"
          @click="submit"
        >
          登录/注册
        </div>
        <div class="login-tip">
          <el-checkbox v-model="checked" class="login-check" />
          已阅读并同意
          <span class="login-agreement" @click="drawer2 = true"
            >《用户服务协议》</span
          >
          和
          <span class="login-agreement" @click="drawer1 = true"
            >《隐私协议》</span
          >
        </div>
      </div>
    </div>
    <el-drawer
      title="隐私协议"
      :visible.sync="drawer1"
      size="80%"
      :with-header="false"
    >
      <iframe
        :src="pdfVisitUrl1"
        frameborder="0"
        type="application/x-google-chrome-pdf"
        width="100%"
        height="100%"
      />
    </el-drawer>
    <el-drawer
      title="用户服务协议"
      :visible.sync="drawer2"
      size="80%"
      :with-header="false"
    >
      <iframe
        :src="pdfVisitUrl2"
        frameborder="0"
        type="application/x-google-chrome-pdf"
        width="100%"
        height="100%"
      />
    </el-drawer>
  </div>
</template>

<script>
import { sendSmsCode, getTenantIdByMobile } from "@/api/login";
import Cookies from "js-cookie";
import HeadCom from "./components/header.vue";
import {
  nationPhoneNumber,
  getNationPhoneNumber,
} from "@/utils/frontDataDict.js";
export default {
  name: "Login",
  components: {
    HeadCom,
  },
  data() {
    return {
      // 隐私协议
      pdfVisitUrl1: "https://www.datarer.com/static/PrivacyPolicy.html",
      // 服务协议
      pdfVisitUrl2: "https://www.datarer.com/static/ServicePolicy.html",
      drawer1: false,
      drawer2: false,
      checked: true,
      isLogin: true,
      timeout: null,
      setTimeoutVar: null,
      nationPhoneNumber: nationPhoneNumber,
      chinese_name: "中国",
      chinese_code: "86",
      mobile: "",
      password: "",
      errCode: 0,
      code: "",
      codeData: {},
      tenantId: null,
      loginLoading: false,
      isLoading: false,
    };
  },
  watch: {
    chinese_name: function (newValue) {
      this.chinese_code = getNationPhoneNumber(newValue);
    },
  },
  created() {
    Cookies.remove("tenantId");
    localStorage.setItem("loginType", "company");
  },
  methods: {
    getTenantIdByMobile() {
      const param = {
        mobile: this.mobile,
      };
      return new Promise((resolve, reject) => {
        getTenantIdByMobile(param).then((res) => {
          Cookies.remove("tenantId");
          if (res.code === 0) {
            this.tenantId = res.data;
            Cookies.set("tenantId", this.tenantId);
            resolve();
          } else {
            Cookies.set("tenantId", 1);
            reject();
          }
        });
      });
    },
    submit() {
      console.log("1");
      if (!this.checked) return;
      console.log("2");
      if (
        !this.mobile ||
        !/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
          this.mobile
        )
      ) {
        console.log("3");
        this.errCode = 1;
        return;
      }
      console.log("4");
      if (!this.code) {
        this.errCode = 3;
        return;
      }
      console.log("5");
      this.errCode = 0;
      const params = {
        mobile: "+" + this.chinese_code + "-" + this.mobile,
        code: this.code,
      };
      if (this.loginLoading) return;
      this.loginLoading = true;
      this.$store
        .dispatch("Login", params)
        .then(() => {
          localStorage.setItem("companyLoginPhone", this.mobile);
          this.loginLoading = false;
          this.$router
            .push({ path: "/userManage/personalCenter/checkId" })
            .catch(() => {});
        })
        .catch(() => {
          this.loginLoading = false;
          if (this.setTimeoutVar !== null) {
            clearTimeout(this.setTimeoutVar);
            this.timeout = null;
          }
        });
    },
    async getCode() {
      if (
        !this.mobile ||
        !/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
          this.mobile
        )
      ) {
        this.errCode = 1;
        return;
      }
      this.errCode = 0;
      await this.getTenantIdByMobile();
      if (this.isLoading) return;
      this.isLoading = true;
      sendSmsCode({
        mobile: "+" + this.chinese_code + "-" + this.mobile,
        scene: 4,
      })
        .then((res) => {
          if (res.data) {
            let times = 60;
            if (this.setTimeoutVar !== null) {
              clearTimeout(this.setTimeoutVar);
            }
            this.setTimeoutVar = setInterval(() => {
              if (times <= 0) {
                clearInterval(this.setTimeoutVar);
                this.timeout = null;
                this.isLoading = false;
                return;
              }
              this.timeout = times;
              times -= 1;
            }, 1000);
          }
        })
        .catch((e) => {
          this.isLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scope>
.page {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  .el-select {
    width: 100% !important;
    height: 100%;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  }
  .content {
    position: relative;
    margin-top: 80px !important;
    height: calc(100vh - 80px);
    min-height: 630px;
    z-index: 1;
    .bg-block {
      width: 100%;
      height: 100%;
      background: url("../assets/images/company-login-bg.jpeg") no-repeat center;
      background-size: cover;
      filter: blur(2px);
    }
    .login-box {
      width: 335px;
      position: absolute;
      top: 50%;
      margin: auto;
      transform: translateY(-50%);
      right: 18.75%;
      z-index: 99;
      background: #ffffff;
      box-shadow: 0px 3px 7px 0px rgba(70, 75, 83, 0.19);
      border-radius: 8px;
      padding: 22px 15px 40px;

      .title {
        font-size: 20px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #37383d;
        line-height: 28px;
        margin-bottom: 6px;
      }

      .tip {
        height: 14px;
        font-size: 10px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #b0b0b0;
        line-height: 14px;
        margin-bottom: 30px;
      }

      .list-box {
        height: 46px;
        border-bottom: 1px solid #d4d6da;
        display: flex;
        align-items: center;

        .label {
          display: flex;
          flex-direction: column;

          .label-title {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #37383d;
            line-height: 17px;
            margin: 0;
          }

          .label-tip {
            font-size: 10px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9597a0;
            line-height: 14px;
            margin: 0;
          }
          .label-tip2 {
            display: none;
          }
        }

        .value {
          padding-left: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;
          flex: 1;
          position: relative;
          &::after {
            content: "";
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background: #d4d6da;
            height: 18px;
            position: absolute;
            width: 1;
          }

          .value-title {
            font-size: 15px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #37383d;
            line-height: 21px;
          }

          .value-input {
            border: none;
            font-size: 15px;
            outline: none;
          }

          .value-tip {
            font-size: 15px;
            font-weight: 500;
            color: #4a90e2;
            cursor: pointer;
          }

          .icon {
            font-size: 18px;
            color: #b7bfce;
          }

          .code {
            position: absolute;
            cursor: pointer;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            font-size: 15px;
            font-weight: 500;
            color: #4a90e2;
            line-height: 33px;
          }
        }
      }

      .login-btn {
        height: 44px;
        border-radius: 3px;
        background: #4677b9;
        font-size: 16px;
        font-weight: 600;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
        margin-top: 25px;
        cursor: pointer;
        &.checked {
          background: #c8c8c8;
          cursor: not-allowed;
        }
      }

      .login-tip {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #969696;
        line-height: 17px;
        display: flex;
        align-items: center;
      }

      .login-agreement {
        color: #4a90e2 !important;
        cursor: pointer;
      }

      .login-check {
        margin-right: 10px;
      }

      .code-tip {
        width: 100%;
        margin-top: 12px;
        font-size: 12px;
        font-weight: 400;
        color: #ff5469;
        line-height: 17px;
      }

      .toLinks {
        position: absolute;
        color: green;
        text-align: center;
        cursor: pointer;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
input::-webkit-input-placeholder {
  color: #c4c4c4;
}
.el-select-dropdown__item {
  font-size: 18px;
}
@media screen and (min-width: 1600px) {
  #app {
    .login-box {
      width: 534px;
      height: 630px;
      // right: 110px;
      border-radius: 12px;
      padding: 35px 25px 70px;
      .title {
        font-size: 32px;
        font-weight: 600;
        color: #37383d;
        line-height: 45px;
        margin-bottom: 6px;
        margin: 45px 0 6px;
      }
      .tip {
        font-size: 18px;
        font-weight: 400;
        color: #b0b0b0;
        line-height: 25px;
        margin-bottom: 33px;
      }
      .list-box {
        height: 75px;
        border-bottom: 1px solid #d4d6da;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        .label {
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
        }
        .label-title {
          font-size: 18px !important;
          color: #37383d;
          line-height: 25px;
          margin-bottom: 2px;
        }
        .label-tip2 {
          display: block;
        }
        .label-tip {
          font-size: 15px;
          color: #9597a0;
          line-height: 21px;
          margin-right: 30px;
          margin-top: 15px;
        }
        .value {
          border-left: 1px solid #d4d6da;
          padding-left: 18px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;
          flex: 1;
          height: 80%;
          .value-title {
            font-size: 24px;
            line-height: 33px;
          }
        }
        .value-input {
          font-size: 24px;
        }
        .code {
          font-size: 24px;
        }
      }
      .code-tip {
        font-size: 18px;
        line-height: 25px;
        margin-top: 12px;
      }
      .login-btn {
        height: 70px;
        font-size: 25px;
        margin-top: 40px;
      }
      .login-tip {
        font-size: 18px;
        line-height: 25px;
      }
    }
  }
}
</style>
